import { View, Image, ScrollView, Picker, PickerView, PickerViewColumn } from '@tarojs/components'
import { AtTabs, AtTabsPane, } from "taro-ui"
import { getAppData } from '@utils/tools'
import { BasePage } from '@common/components/base-page'
import selectImg from '../../assets/img/select (1).png'
import './index.scss'



interface IProps {
    // clickedSelectPanel: boolean
    handleMediaSelect: Function
    // selectedPlat: string
    // selectedPlatName: string
    tabData: any
    getCategory: Function
}
interface IState {
    current: number,
    tabList: any,
    selector: any,
    selected: any,
    years: any,
    months: any,
    days: any
}

export default class Tabs extends BasePage<IProps, IState> {
    constructor(props) {
        super(props);
        this.state = {
            current: 0,
            tabList: [
                { index: 0, title: '全部' },
                { index: 1, title: '新品体验' },
                { index: 2, title: '日常种草' },
                { index: 3, title: '限定活动' },
            ],
            selector: ['抖音', '快手', '哔哩哔哩', '微博', '视频号', '小红书'],
            selected: '',
            years: ['2023', '2024'],
            months: ['1', '2', '3'],
            days: ['11', '12', '13']
        }
    }
    handleClick = (e) => {
        this.setState({
            current: e,
        })
        const clickedTab = this.props.tabData?.categories?.[e]; // 使用索引从categories数组中检索Tab对象  
        console.log(e, clickedTab, '点击了tab页')
        this.props.getCategory(clickedTab)
    }

    onChange(e) {
    }
    selectPlatform = () => {
        this.props.handleMediaSelect()
    }
    truncateString = (str, maxLength) => {
        // 如果字符串长度小于或等于maxLength，则直接返回原字符串  
        if (str.length <= maxLength) {
            return str;
        }
        // 否则，返回截断后的字符串加上省略号  
        return `${str.slice(0, maxLength)}...`;
    }

    render() {
        let newCategories = this.props.tabData?.categories?.map(obj => {
            return {
                ...obj,
                title: obj.name,
            };
        });

        // const { selectedPlatName } = this.props
        // console.log(selectedPlatName, 'selectedPlatNameselectedPlatName')
        return (
            <View className="content">
                <ScrollView className="tabs">
                    <View>
                        {/* tab */}
                        <AtTabs
                            current={this.state.current}
                            animated={false}
                            scroll
                            tabList={this.state.tabList}
                            onClick={this.handleClick.bind(this)}>
                            {
                                this.state.tabList && this.state.tabList?.map((item, index) => {
                                    return (
                                        <View>
                                            <AtTabsPane current={this.state.current} index={item.index}>
                                                {/* <View>{item.title}</View> */}
                                            </AtTabsPane>
                                        </View>
                                    )
                                })
                            }
                        </AtTabs>
                    </View >
                </ScrollView >
            </View >
        )
    }
}
